<template>
  <div>
    <vxe-toolbar custom export>
      <template #buttons>
        <vxe-button status="success" @click="showModal({})">新增</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="vxeTable"
      :loading="tableLoading"
      :export-config="{}"
      :data="tableData"
      :column-config="{useKey:true}"
      :row-config="{useKey:true}"
      @sort-change="tableSortChange"
    >
      <vxe-column type="seq" align="right" width="40" />
      <vxe-column field="province" title="省份" sortable />
      <vxe-column field="city" title="城市" sortable />
      <vxe-column field="address1" title="区县" sortable />
      <vxe-column field="address2" title="详细地址" sortable />
      <vxe-column field="zipCode" title="邮编" sortable />
      <vxe-column field="person" title="联系人" sortable />
      <vxe-column field="mobile" title="手机号" sortable />
      <vxe-column field="telephone" title="固定电话" sortable />
      <vxe-column field="createTime" title="创建时间" sortable :visible="false" />
      <vxe-column field="updateTime" title="修改时间" sortable :visible="false" />
      <vxe-column field="createByName" title="创建人" sortable :visible="false" />
      <vxe-column field="updateByName" title="修改人" sortable :visible="false" />
      <vxe-column field="op" title="操作">
        <template #default="{row}">
          <vxe-button type="text" status="primary" @click="showModal(row)">编辑</vxe-button>
          <vxe-button type="text" status="danger" @click="deleteTableRow(row.id)">删除</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-modal
      v-if="dialogVisible"
      v-model="dialogVisible"
      :title="modelValue.id?'编辑':'新增'"
      resize
      show-footer
      show-zoom
      :width="isMobile?'100%':'60%'"
      :fullscreen="isMobile"
      transfer
    >
      <el-form
        ref="form"
        :model="modelValue"
        :rules="formRules"
        label-width="90px"
        label-position="right"
      >
        <el-form-item prop="province" label="省份">
          <el-input v-model="modelValue.province" clearable />
        </el-form-item>
        <el-form-item prop="city" label="城市">
          <el-input v-model="modelValue.city" clearable />
        </el-form-item>
        <el-form-item prop="address1" label="区县">
          <el-input v-model="modelValue.address1" clearable />
        </el-form-item>
        <el-form-item prop="address2" label="详细地址">
          <el-input v-model="modelValue.address2" clearable />
        </el-form-item>
        <el-form-item prop="zipCode" label="邮编">
          <el-input v-model="modelValue.zipCode" clearable />
        </el-form-item>
        <el-form-item prop="person" label="联系人">
          <el-input v-model="modelValue.person" clearable />
        </el-form-item>
        <el-form-item prop="mobile" label="手机号">
          <el-input v-model="modelValue.mobile" clearable />
        </el-form-item>
        <el-form-item prop="telephone" label="固定电话">
          <el-input v-model="modelValue.telephone" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <vxe-button status="primary" content="提交" @click="submitEditForm" />
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import Api from '@/api/upms/address'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
export default {
  name: 'UpmsAddress',
  components: { },
  mixins: [VxeTableMixin],
  props: {
    tableName: {
      type: String,
      required: true
    },
    originId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          tableName: this.tableName,
          originId: this.originId
        },
        page: {
          pageSize: -1
        }
      },
      modelValue: {
        id: undefined,
        province: undefined,
        city: undefined,
        address1: undefined,
        address2: undefined,
        zipCode: undefined,
        person: undefined,
        mobile: undefined,
        telephone: undefined,
        tableName: undefined,
        originId: undefined
      },
      formRules: {

      },
      dialogVisible: false

    }
  },
  computed: {

  },
  mounted() {
    this.confirmBaseQueryData()
  },
  methods: {
    showModal(row = {}) {
      this.dialogVisible = true
      this.modelValue = {
        id: row.id,
        province: row.province,
        city: row.city,
        address1: row.address1,
        address2: row.address2,
        zipCode: row.zipCode,
        person: row.person,
        mobile: row.mobile,
        telephone: row.telephone,
        tableName: this.tableName,
        originId: this.originId
      }
    },
    submitEditForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const api = this.modelValue.id ? Api.update : Api.create
          api(this.modelValue).then(({ code, msg }) => {
            if (code === 200200) {
              this.dialogVisible = false
              this.loadTable()
            }
            this.$message({ type: code === 200200 ? 'success' : 'error', message: msg || '保存成功' })
          }).finally(() => {

          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>

</style>
